<!--
  组件名称：地图路由页面
  组件作用：调用地图组件
  作者：王禹
 -->
<template>
  <PopupPanelMapView
              v-bind:title="popupPanelMapViewData.title"
              v-bind:mapSourceUrl="popupPanelMapViewData.mapSourceUrl"
              v-bind:mapType="popupPanelMapViewData.mapType"
              v-bind:popupPanels="popupPanelMapViewData.popupPanels"
              v-bind:tracingPointOptions="popupPanelMapViewData.tracingPointOptions">

  </PopupPanelMapView>
</template>
<script>
// 弹出面板
import Panel from './Panel'
import PanelMessage from './PanelMessage'
import PopupPanelMapView from './PopupPanelMapView'
export default {
  name: 'overall',
  data () {
    return {
      // 包含弹出窗口的地图组件所需数据
      popupPanelMapViewData: {
        // 标题
        title: '',
        // 地图数据来源
        mapSourceUrl: '',
        // 地图数据类型
        mapType: '',
        // 弹出面板组件集合（该参数为弹出面板组件集合，描述组件ID、组件对象、所在位置、弹出面板调用时回调函数（当触发弹出面板时调用，传入面板对象，触发方式，描点附带数据））
        popupPanels: {
          // 弹出组件id
          'testPanel': {
            id: 'testPanel',
            // 弹出组件
            component: Panel,
            // 组件出现位置
            place: 'right',
            // 弹出面板调用时回调函数（当触发弹出面板时调用，传入面板对象，触发方式，描点附带数据，本组件其他全部弹窗调起函数，根据ID）
            popupCallback: function (panel, triggerWay, additionData, otherPanelCallbacks) {

            }
          },
          // 弹出组件id
          'testPanel2': {
            id: 'testPanel2',
            // 弹出组件
            component: PanelMessage,
            // 组件出现位置
            place: 'left',
            // 弹出面板调用时回调函数（当触发弹出面板时调用，传入面板对象，触发方式，描点附带数据，本组件其他全部弹窗调起函数，根据ID）
            popupCallback: function (panel, triggerWay, additionData, otherPanelCallbacks) {

            }
          }


        },
        // 描点配置(该配置描述描点ID、应该使用的图标、图标大小、描点触发弹出面板的方式、附带数据)
        tracingPointOptions: [
          // 第一种点
          {
            // 该配置描述描点ID
            id: 'car',
            // 应该使用的图标
            icon: './../../static/logo.png',
            // 是否跳过
            isSkip: false,
            // 图标大小
            size: {
              width: 20,
              heigth: 20
            },
            // 描点触发弹出面板的方式
            triggerMode: 'click',
            // 要触发的面板ID,可以多个
            triggerPanelIds: ['testPanel', 'testPanel2', 'testPanel3'],
            // 附带数据,根据该数据数量确定描点数量
            datas: [
              //
              {
                // id
                id: '1',
                // 经度
                longitude: 114.30878471,
                // 纬度
                latitude: 30.59122800,
                // 附加数据
                additional: {
                  // 传递给测试面板的数据
                  testPanel: {
                    title: '1'
                  },
                  // 传递给测试面板的数据
                  testPanel2: {
                    title: '1'
                  },
                  // 传递给测试面板的数据
                  testPanel3: {
                    title: '1'
                  }
                }
              },
              //
              {
                // id
                id: '2',
                // 经度
                longitude: 115.30578472,
                // 纬度
                latitude: 30.59122800,
                // 附加数据
                additional: {
                  // 传递给测试面板的数据
                  testPanel: {
                    title: '2'
                  },
                  // 传递给测试面板的数据
                  testPanel2: {
                    title: '2'
                  },
                  // 传递给测试面板的数据
                  testPanel3: {
                    title: '2'
                  }
                }
              },
              //
              {
                // id
                id: '3',
                // 经度
                longitude: 116.30778472,
                // 纬度
                latitude: 30.59122800,
                // 附加数据
                additional: {
                  // 传递给测试面板的数据
                  testPanel: {
                    title: '3'
                  },
                  // 传递给测试面板的数据
                  testPanel2: {
                    title: '3'
                  },
                  // 传递给测试面板的数据
                  testPanel3: {
                    title: '3'
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  watch: {

  },
  mounted: function () {

  },
  methods: {
    // 创建地图
    createMap: function () {

    }

  },
  components: {
    PopupPanelMapView: PopupPanelMapView,
    panel: Panel

  },
  // 组建接受的传入参数
  props: [

  ]

}
</script>
<style>

</style>
